<template>
  <div style="background-color: #F4F6F9">
    <el-row type="flex" style="margin-top:20px">
      <el-col class="article">
        <el-card >
         <el-tabs v-model="activeName" @tab-click="myArticle">
         <el-tab-pane label="关注" name="focus">关注</el-tab-pane>
         <el-tab-pane label="推荐" name="recommend">
          <div v-for="item in articleData" :key="item.id">
            <h3>{{ item.title }}</h3>
            <div class="temp">
              {{item.text}}
              </div>
            <el-row type="flex">
              <el-col :span="8" style="margin-top:15px">
                <span>作者: {{item.author}}</span>
              </el-col>
              <el-col :span="8" :push="13">
              <p v-on:click="readAll(item.id)" style="cursor: pointer; color: #3E88B7;"> 阅读全文</p>
              </el-col>
            </el-row>
            </div>
         </el-tab-pane>
         <el-tab-pane label="我的文章" name="my" >

           <div v-for="item in articleData" :key="item.id">
            <h3>{{ item.title }}</h3>
            <div class="temp">
              {{item.text}}
              </div>
            <el-row type="flex">
              <el-col :span="8" style="margin-top:15px">
                <span>作者: {{item.author}}</span>
              </el-col>
              <el-col :span="8" :push="13">
              <p v-on:click="readAll(item.id)" style="cursor: pointer; color: #3E88B7;"> 阅读全文</p>
              </el-col>
            </el-row>
            </div>

         </el-tab-pane>
         <el-tab-pane label="收藏" name="collect">收藏</el-tab-pane>
      </el-tabs>
      </el-card>
      </el-col>
      <el-col :offset="1">
        <el-card style="width: 300px">
          <el-row type="flex">
          <el-col style="width: 30px">
            <i  class="el-icon-user-solid"></i>
          </el-col>
          <el-col><span>推荐关注</span></el-col>
          </el-row>
          <hr>
          <div v-for="item in randomUser" :key="item.id">
            <el-row type="flex">
              <el-col><el-avatar icon="el-icon-user-solid"></el-avatar></el-col>
              <el-col style="margin-top:8px"><span style= "text-align:center">{{item.userName}}</span></el-col>
              <el-col><el-button type="primary">关注</el-button></el-col>
            </el-row>
          </div>
        </el-card>

        <el-card style="width: 300px;margin-top: 50px">
          <el-row type="flex">
          <el-col style="width: 30px">
            <i  class="el-icon-s-opportunity"></i>
          </el-col>
          <el-col><span>发表文章</span></el-col>
          </el-row>
          <hr>
          <el-form autocomplete="off" ref="form" :rules="rules" :model="form">
            <el-form-item label="文章标题" prop="title">
              <el-input v-model="form.title" placeholder="输入标题"></el-input>
            </el-form-item>
            <el-form-item label="文章内容" prop="text">
              <el-input type="textarea" v-model="form.text" placeholder="输入内容"></el-input>
            </el-form-item>
          </el-form>
          <el-button style="margin-left:80px" type="primary" @click="addArticle">快速发表</el-button>
        </el-card>

      </el-col>
    </el-row>
     
      
  </div>
</template>

<script>
import {htmlToText} from '@/utils/utils'
import {page} from '@/api/article'
import {reallAuthor} from '@/utils/utils'
import {randomUser} from '@/api/user'
import {add} from '@/api/article'
//import { quillEditor } from 'vue-quill-editor'
export default {
    data () {
    return {
     article: {
      text: ''
     },
     //表单数据
     form: {title: '',text: '',author: ''},
     //查询条件
     page: {
      pageNo: 0,
      author: "",
     },
     //用于切换标签页
     activeName: 'recommend',
     //文章数据
     articleData: [],
     //作者名字的数组
     authorList: [],
     //推荐关注的人
     randomUser: [],
     //验证规则
     rules: {
       title: [
        { required: true, message: '请输入标题', trigger: ['blur', 'change'] }
      ],
      text: [
        { required: true, message: '请输入内容', trigger: ['blur', 'change'] }
      ]
      },
    }
    },
    created () {
      this.selectByPage()
      //推荐关注
      randomUser().then((res)=>{
        this.randomUser = res.data.data
      })
      this.form.author = JSON.parse(localStorage.getItem("user")).id
    },
    methods: {
    //阅读全文
    readAll(id){
      this.$router.push(`/userarticle/${id}`)
    },
    selectByPage(){
      if(this.page.author == ''){
        this.page.author = null
      }
      //分页查询
      page(this.page).then(async (res)=>{
        var tempArr = res.data.data.data
        tempArr.forEach(element => {
          //把集合里每个对象的text转换为纯文本
          element.text = htmlToText(element.text)
          //只显示最高120个字符如果大于加冒号
          if(element.text.length > 120){
            element.text = element.text.slice(0,119) + '....'
          }else{
            //是否为标点结尾
            const  reg = /[\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F|\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/;
            if(reg.test(element.text.charAt(element.text.length - 1)))
             element.text = element.text.slice(0,-1) + '....' 
          }
        });
         this.articleData = await reallAuthor(tempArr)
      })
    },
    //判断点击的哪个标签页
    myArticle(v){
      console.log(v);
      if(v.name == "my"){
      this.page.author = this.form.author = JSON.parse(localStorage.getItem("user")).id
      this.selectByPage()
      this.page.author = ""
      }
      if(v.name == "recommend"){
        this.selectByPage()
      }
    },
    //添加文章
    addArticle () {
      add(this.form).then((res)=>{
        if(res.data.code == 0){
          this.$message.success("添加成功")
          this.form.title = ''
          this.form.text = ''
        }
      })
    }
   }}
</script>

<style lang="scss" scoped>

.article {
  background-color: white;
  margin-left: 15%;
}
.temp {
   height: 100px;
   overflow: hidden;
   line-height: 20px;
   max-height: 80px;
}
</style>